<template>
  <div class="toolbar">
    <ul v-if="isShow">
      <li title="切换主题（深色或浅色模式）" @click="switchTheme">
        <b-icon icon="circle-half" variant="white"></b-icon>
      </li>
      <li title="返回顶部" @click="backTop">
        <b-icon icon="capslock-fill" variant="white"></b-icon>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:false,
      switch:false
    }
  },
  mounted() {
    this.isShowToolbar()
    window.addEventListener('scroll',this.handleScroll)
  },
  computed:{
    
  },
  methods:{
    switchTheme() {
      this.switch = !this.switch
      if(this.switch) {
        document.querySelector('body').setAttribute('data-theme','dark')
      }else {
        document.querySelector('body').setAttribute('data-theme','light')
      }
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop =  0
    },
    isShowToolbar() {
      if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        this.isShow = true
      }else {
        this.isShow = false
      }
    },
    handleScroll() {
      this.isShowToolbar()
    }
  }
}
</script>

<style>
  .toolbar {
    position: fixed;
    top: 50%;
    right: 0;

  }
  .toolbar ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-color: var(--primary);
    border-bottom: 1px solid #fff;
  }
  .toolbar ul li:last-child {
    border: none;
  }
  .toolbar ul li:hover {
    background: orange;
  }
</style>